<script setup lang="ts">
import { ref, reactive, h } from "vue";
import { getProcessingListApi, endApi } from "/@/api/mes/feedback";
import { useModal } from '/@/hooks/useModal'
import { useSuccessMessage } from '/@/hooks/useMessage'
import { dataFormatter } from '/@/utils/data'

// 表格配置
const tableRef = ref<YTableInstance>();
const tableProps = reactive<YTableProps>({
  height: "auto",
  columns: [
    { field: "workOrderCode", label: "工单编号", width: 150 },
    { field: "productName", label: "产品名称", width: 100 },
    { field: "productCode", label: "产品编号", width: 100 },
    { field: "processName", label: "工序", width: 100 },
    { field: "planWorkingTime", label: "计划工时", width: 100 },
    { field: "planStartTime", label: "计划开始", width: 100, formatter: 'date' },
    { field: "planEndTime", label: "计划结束", width: 100, formatter: 'date' },
    {
      field: "actualWorkingTime", label: "实际工时", width: 100,
      formatter: (v: number) => {
        return Number((v / 60).toFixed(2)) + '分'
      }
    },
    { field: "actualStartTime", label: "实际开始", width: 150 },
    { field: "actualEndTime", label: "实际结束", width: 150 },
    { field: "receiveQuantity", label: "接收数", width: 100 },
    { field: "sendQuantity", label: "发送数", width: 100 },
    { field: "planQuantity", label: "加工数", width: 100 },
    { field: "completeQuantity", label: "合格数", width: 100 },
    { field: "defectsQuantity", label: "次品数", width: 100 },
    { field: "isProcessing", label: "加工中", width: 100, formatter: 'bool' },
    { field: "processingUser", label: "加工人", width: 100, formatter: (v) => dataFormatter(v, 'Employee') },

  ],
  remoteConfig: {
    api: getProcessingListApi,
    immediate: true,
    params: { processingStatus: 0 }
  },
  filters: [
    {
      field: 'processingStatus',
      label: '状态',
      component: {
        key: 'RadioButtonMaker',
        props: {
          defaultValue: 0,
          options: [
            { label: '待开工', value: 0 },
            { label: '开工中', value: 1 },
            { label: '已完工', value: 2 },
          ],
          onChange() {
            tableRef.value.loadData()
          }
        }
      }
    },
    {
      label: '工序', field: 'processId',
      component: {
        key: 'SelectMaker',
        props: {
          dataSource: 'Process',
          hasAll: true
        }
      }
    },
    { label: '工单编号', field: 'keyword1' },
    { label: '产品编号/名称', field: 'keyword2' },
  ],
  operas: [
    {
      title: '开工',
      visible: async () => {
        if (tableRef.value) {
          const row = await tableRef.value.getCheckRecord()
          return row && !row.isProcessing && row.receiveQuantity > row.completeQuantity + row.defectsQuantity
        }
        return true
      },
      onClick: async () => {
        const select = await tableRef.value.getCheckRecord(true);
        startModal.open({ contentProps: { id: select.id } })
      }
    },
    {
      title: '完工',
      visible: async () => {
        if (tableRef.value) {
          const row = await tableRef.value.getCheckRecord()
          return row && !!row.isProcessing
        }
        return true
      },
      onClick: async () => {
        const select = await tableRef.value.getCheckRecord(true);

        const { succeeded } = await endApi({ id: select.id })
        if (succeeded) {
          useSuccessMessage('完工成功')
          tableRef.value.loadData()
        }
      }
    },
    {
      title: '报工',
      visible: async () => {
        if (tableRef.value) {
          const row = await tableRef.value.getCheckRecord()
          return row && !!row.isProcessing && row.completeQuantity + row.defectsQuantity < row.receiveQuantity
        }
        return false
      },
      onClick: async () => {
        const select = await tableRef.value.getCheckRecord(true);
        reportModal.open({
          contentProps: {
            id: select.id,
            completeQuantity: select.receiveQuantity - select.completeQuantity
          }
        })
      }
    },
    {
      title: '发送',
      visible: async () => {
        if (tableRef.value) {
          const row = await tableRef.value.getCheckRecord()
          return row && row.completeQuantity > row.sendQuantity
        }
        return false
      },
      onClick: async () => {
        const select = await tableRef.value.getCheckRecord(true);
        sendModal.open({
          contentProps: {
            id: select.id,
            sendQuantity: select.completeQuantity - select.sendQuantity
          }
        })
      }
    }
  ],
  onFilterChange() {
    tableRef.value.updateOperas()
  },
  onCellClick() {
    tableRef.value.updateOperas()
  }
});

const isChange = ref(false)
const useProcessingModal = (config: ModalConfig) => {
  const modal = useModal(config);

  modal.on('open', () => {
    isChange.value = false
  })
  modal.on('close', () => {
    if (isChange.value) {
      tableRef.value.loadData()
    }
  })

  return modal;
}

// 开工窗口
const startModal = useProcessingModal({
  title: '开工',
  width: 380,
  height: 300,
  content: () => import('./modals/start.vue'),
  contentOn: {
    onChange: () => {
      isChange.value = true
    }
  }
});

const reportModal = useProcessingModal({
  title: '报工',
  width: 380,
  height: 300,
  content: () => import('./modals/report.vue'),
  contentOn: {
    onChange: () => {
      isChange.value = true
    }
  }
})

const sendModal = useProcessingModal({
  title: '发送',
  width: 380,
  height: 300,
  content: () => import('./modals/send.vue'),
  contentOn: {
    onChange: () => {
      isChange.value = true
    }
  }
});

</script>
<template>
  <IndexLayout>
    <YTable v-bind="tableProps" ref="tableRef"></YTable>
  </IndexLayout>
</template>